<template>
  <div>


    <group class="an-imgtxt">
      <cell class="imgtex" v-for="item in shopData" :key="item.id" >
        <div slot="icon" class="pic" @click="onRoud(item.shopId)">
          <img :src="item.url">
        </div>
        <div slot="title" class="text">
          <h4 class="til" @click="onRoud(item.shopId)">{{item.til}}</h4>
          <div class="badge">
            <span>颜色分类：{{shopChoice}}</span>
          </div>
          <div class="an-money clearfix">
            <div class="color-Danger an-left">￥<span class="money">{{item.money}}</span></div>
            <div class="an-right" @click="OnShopCar(item)">
              <x-icon type="android-add-circle" size="30" class="ico-gree"></x-icon>
            </div>
          </div>
        </div>
      </cell>
    </group>


    <div>
      <load-more :show-loading="Lshow" tip="暂无数据" background-color="#fbf9fe"></load-more>
    </div>


  </div>
</template>

<script>
  import Vue from 'vue'
  import { Cell, Group,LoadMore } from 'vux'
  import {domeShopList,getProductList} from '@/api/data'
  import {PulsStoreShopCar} from '@/utils/auth'
    export default {
      name: "img-txt-left",
      props:['secendId'],
      components: {
        Group,
        Cell,
        LoadMore,
      },
      data(){
        return{
          shopData:[],
          shopChoice:'紧凑型',
          listId:'', //产品类别ID，用来请求产品列表
          Lshow:false,  //加载状态
        }
      },
      watch:{
        secendId: function (nd,od) {
          this.listId = nd;
          this.getProductList();
        }
      },
      mounted(){

      },
      methods:{
        getProductList(){
          this.Lshow = true;
          getProductList(this.listId).then(res=>{
            this.Lshow = false;
            this.shopData = res.result.data;
          })
        },
        OnShopCar(val){
          Vue.set(val, 'number', 1);
          PulsStoreShopCar(val,1);
        },
        onRoud(id){
          this.$router.push('/shopSelect/shopInfo?id='+id);
        }
      }
    }
</script>

<style lang="less">
  .an-imgtxt{
    .weui-cells{
      margin-top: 0;
      &:before{
        border-top: none;
      }
    }
  }
</style>
<style lang="less" scoped>
  @import "../../../styles/anstyle";
  .imgtex{
    font-size: 14px;
    .pic{
      width: 100px;
      height: 100px;
      overflow: hidden;
      margin-right: 10px;
    }
    .text{
      .til{
        margin-bottom: 8px;
        .tilelic;
        font-weight: 400;
      }
      .badge{
        color:@color-text3;
        margin-bottom: 8px;
      }
      .an-money{
        font-size: 16px;
        .an-right{
          color: #ff5f01;
        }
      }
    }
  }

</style>
